<template>
    <el-table
      :data="tableData"
      border
      style="width: 90%; margin: 20px auto;border-radius: 8px; margin: 20px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
		
		<el-table-column
		  prop="fileName"
		  label="特定绩效项目"
		  width="200"
		></el-table-column>
		<el-table-column
		  prop="empName"
		  label="员工姓名"
		  width=""
		></el-table-column>
		<el-table-column
		  prop="parttimeReward"
		  label="兼职金额/￥"
		  width=""
		></el-table-column>
		
		<el-table-column
		  prop="difficulty"
		  label="难度系数"
		  width=""
		></el-table-column>
		
		<el-table-column
		  prop="performance"
		  label="业绩考核系数"
		  width=""
		></el-table-column>
		
		
		<el-table-column
		  prop="assessorName"
		  label="评分人"
		  width=""
		></el-table-column>
		
		<el-table-column
		  prop="score"
		  label="上级考核评分"
		  width=""
		></el-table-column>
		
		<el-table-column
		  prop="remark"
		  label="评分说明"
		  width=""
		></el-table-column>
		
		<el-table-column
		  prop="isPerformance"
		  label="是否关联原岗位业绩"
		  width=""
		>
		<template #default="scope" >
		  
		    <span style="margin-left: 10px">
			{{ scope.row.isPerformance == 1 ?"是":"否"}}
			</span>
			
		</template>
		
		</el-table-column>
		
		<el-table-column
		  label="实际金额"
		  width=""
		>
		<template #default="scope">
		  <div style="display: flex; align-items: center">
		    <span style="margin-left: 10px">
			{{ scope.row.performance == null ?
						(scope.row.parttimeReward*scope.row.score*scope.row.difficulty/10000).toFixed(2)
						:(scope.row.parttimeReward*scope.row.score*scope.row.performance*scope.row.difficulty/1000000).toFixed(2)
			}}
			
			</span>
		  </div>
		</template>
		</el-table-column>
	
    </el-table>
	<div style="text-align: right;margin-right: 200px;margin-bottom: 20px;"> 总计：{{total}}￥</div>
	
</template>

<script setup>
import {ref, onBeforeMount, reactive,getCurrentInstance,watch} from "vue";


let props = defineProps({
  partTimeRewardList: {
    type: Array,
    required: true, //是否规定必须得有
  }
})


var total = 0;
for(var i = 0;i<props.partTimeRewardList.length;i++){
		if(props.partTimeRewardList[i].performance == null){
			// total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*/100)difficulty
			total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*props.partTimeRewardList[i].difficulty/10000)
		}
		else{
			total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*props.partTimeRewardList[i].performance*props.partTimeRewardList[i].difficulty/1000000)
		}
}
total = total.toFixed(2)


watch(props, (newValue, oldValue) => {
  // total = 0
  tableData.value=newValue.partTimeRewardList
  total = 0;
  for(var i = 0;i<props.partTimeRewardList.length;i++){
  	  if(props.partTimeRewardList[i].performance == null){
  	  	// total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*/100)
  	  	total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*props.partTimeRewardList[i].difficulty/10000)
  	  }
  	  else{
  	  	total += parseFloat(props.partTimeRewardList[i].parttimeReward*props.partTimeRewardList[i].score*props.partTimeRewardList[i].performance*props.partTimeRewardList[i].difficulty/1000000)
  	  }
  }
  total = total.toFixed(2)
},{ deep: true });  

const tableData=ref(props.partTimeRewardList)



</script>



<style lang="scss" scoped>

.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 1200px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
</style>
